<template>
  <div>
    <!-- 菜单 -->
    <div class="cp">
      <div class="sh">
        <div class="logo">
          <img src="../../static/images/organize_team/sp.png" alt />
        </div>
        <div class="shtile">
          <span>{{business_name}}</span>
        </div>
      </div>
      <div class="cp_info">
        <div class="cp_item" v-for="(item,index) in menus" :key="index">
          <div class="cpimg">
            <img :src="item.dishesImage" alt />
          </div>
          <div class="cpname">
            <div class="name">
              <span>{{item.dishesName}}</span>
            </div>
            <div class="dj">
              <span>￥{{item.dishesPrice}}</span>
              <span>x{{item.number}}</span>
            </div>
          </div>
        </div>
        <div class="xj">
          <span>已优惠</span>
          <span style="color:red;font-size:0.22rem;">￥</span>
          <span style="color:red;font-size:0.3rem;margin-right:0.2rem;">{{total_discount_price}}</span>
          <span>小计</span>
          <span style="font-size:0.22rem;">￥</span>
          <span style="font-size:0.4rem;">{{total_price}}</span>
        </div>
      </div>
    </div>
    <!-- 备注 -->
    <div class="cp">
      <yd-cell-group>
        <!-- <yd-cell-item arrow type="a" @click.native="zl = true">
          <span slot="left" class="ts">备注</span>
          <span slot="right">口味偏好</span>
          <span slot="right"></span>
        </yd-cell-item>-->

        <yd-cell-item>
          <span slot="left" class="ts">发票</span>
          <span slot="right" style="color:#999">该店不支持线上开票，请联系商户</span>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="ts">支付方式</span>
          <span slot="right" style="color:#999">在线支付</span>
        </yd-cell-item>
      </yd-cell-group>
    </div>
    <!-- <yd-popup v-model="zl" position="bottom" height="55%" style="transform: none;">
      <div>
        <div class="t_gg">
          <div>
            <span style="font-size:0.3rem;margin-bottom:0.2rem">选择口味</span>
          </div>
          <div class="gg_item" v-for="(item,index) in ggitem" :key="index" v-on:click="onxz(index)">
            <div>
              <span :class="isactive == index ? 'zz' : '' ">{{item.text}}</span>
            </div>
          </div>
        </div>
        <p style="text-align: center;padding-top:0.05rem">
          <yd-button @click.native="zl = false">取消</yd-button>
        </p>
      </div>
    </yd-popup>-->
    <div class="bottomjs">
      <div class="bottjs">
        <div class="jsinfo">
          <span style="padding-right:0.3rem;">共:{{menus.length}}件</span>
          <span>合计:</span>
          <span style="color:red;font-size:0.33rem">￥{{total_price}}</span>
        </div>
        <div class="zfbtn">
          <yd-button size="large" type="primary" shape="circle" @click.native="pay_order">确认支付</yd-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "payment",
  data() {
    return {
      zl: false,
      spinner3: 0,
      isactive: -1,
      ggitem: [
        { id: 1, text: "不吃辣" },
        { id: 2, text: "少辣" },
        { id: 3, text: "多辣" },
        { id: 4, text: "不吃蒜" },
        { id: 5, text: "不吃香菜" },
        { id: 6, text: "不挑食" }
      ],
      order_detail: {},
      menus: [],
      total_price: 0,
      total_discount_price: 0,
      business_name: "",
      orderid: this.order_id || this.$route.params.order_id
    };
  },
  computed: {
    ...mapGetters(["order_id"])
  },

  mounted() {
    this.get_order_menus();
    this.pay_order_detail();
  },
  methods: {
    gt() {
      this.zl = true;
    },
    onxz(index) {
      this.isactive = index;
    },

    /*
     * 支付订单确认
     * 作者：gzt
     * 时间：2019-11-27 16:40:40
     */
    pay_order() {
      //1. 调用微信支付
      //2. 支付成功后跳转至订单页
      this.$router.push({ name: "organize_order", params: { order_id: 1 } });
    },

    /*
     * 支付订单的详情信息
     * 作者：gzt
     * 时间：2019-12-01 22:38:00
     */
    pay_order_detail() {
      let _this = this;
      this.$post(this.$api.organizeteam.pay_order_detail, {
        orderId: this.orderid
      }).then(res => {
        if (res.success && res.data) {
          _this.business_name = res.data.bussinesBean.name;
        }
      });
    },

    /*
     * 获取当前订单下的所有菜品
     * 作者：gzt
     * 时间：2019-12-01 23:20:52
     */

    get_order_menus() {
      let _this = this;
      this.$post(this.$api.organizeteam.get_order_menus, {
        pageSize: 100,
        pageNum: 1,
        request: {
          orderId: this.orderid
        }
      }).then(res => {
        if (
          res.success &&
          res.data &&
          res.data.result &&
          res.data.result.length > 0
        ) {
          for (let item of res.data.result) {
            // 订单总金额累加
            _this.total_price += item.dishesAmount;
            // 当前订单优惠额累加
            _this.total_discount_price +=
              (1 - item.dishes.discount) *
              item.dishes.dishesPrice *
              item.number;
            _this.menus.push({
              dishesName: item.dishes.dishesName,
              dishesImage: item.dishes.dishesImage,
              dishesPrice: item.dishes.dishesPrice,
              discount: item.dishes.discount,
              number: item.number
            });
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.cp {
  margin: 0.3rem;
  padding: 0.2rem;
  border-radius: 5px;
  background: #fff;
}
.sh {
  height: 0.8rem;
  display: flex;
  align-items: center;
  font-size: 0.3rem;
  border-bottom: 1px solid #f5f5f5;
  padding: 0rem 0rem 0.2rem 0rem;
}
.logo {
  width: 0.6rem;
}
.logo img {
  height: 0.5rem;
  width: 0.5rem;
  margin-right: 0.1rem;
  display: flex;
  align-items: center;
}
.cp_info {
  text-align: left;
  margin-top: 0.3rem;
  font-size: 0.3rem;
  color: #999;
  padding-right: 0.2rem;
}
.cp_item {
  display: flex;
  margin-bottom: 0.3rem;
}
.cpimg {
  width: 1rem;
  display: flex;
  align-items: center;
}
.cpimg img {
  height: 1rem;
  width: 1rem;
}
.cpname {
  flex: 1;
  display: flex;
  padding-left: 0.2rem;
}
.name {
  flex: 1;
}
.dj {
  width: 1rem;
  display: flex;
  justify-content: space-between;
  text-align: end;
  flex-direction: column;
}
.xj {
  font-size: 0.3rem;
  color: #000;
  text-align: right;
}
.ts {
  font-weight: bold;
  font-size: 0.3rem;
}
.yd-cell-item {
  padding-left: 0rem;
}

/* 底部支付 */
.bottomjs {
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
  left: 0;
}
.bottjs {
  display: flex;
  height: 1.4rem;
  padding: 0.2rem 0.3rem;
  align-items: center;
}
.jsinfo {
  flex: 1;
  display: flex;
  font-size: 0.32rem;
  font-weight: bold;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.3rem;
}
.zfbtn {
  width: 2rem;
}
.yd-btn-block {
  height: 0.8rem;
  margin-top: 0rem;
}
/* 弹窗 */
.t_gg {
  text-align: left;
  padding: 0.2rem;
  border-bottom: 1px solid #f5f5f5;
}
.gg_item {
  display: flex;
  flex-direction: column;
}
.gg_item div {
  margin: 0.1rem 0;
  height: 0.6rem;
  padding: 0.1rem;
  border-radius: 5px;
}
.gg_item span {
  background: #f5f5f5;
  padding: 0.1rem;
  border-radius: 5px;
  border: 1px solid #f5f5f5;
}
.zz {
  border: 1px solid rgb(243, 171, 111) !important;
  color: rgb(243, 171, 111) !important;
  background: #ffffff !important;
}
.md-popup-content {
  overflow-y: hidden;
}
</style>
